<template>
	<view class="animal_detail">
		<view class="animal_detail_header">
			<view class="detail_header_back">
				<image @click="backGo" src="/static/back.png" mode=""></image>
			</view>
			<view class="detail_header_img">
				<image :src="animalObj.pet_coverURL" mode="aspectFill"></image>
			</view>
		</view>
		<view class="animal_detail_main">
			<view class="detail_desc">
				<view class="desc_left">
					<view class="ddesc_tit">
						{{animalObj.pet_name}}
					</view>
					<view class="ddesc_bot">
						{{animalObj.pet_engName}}
					</view>
					<view class="ddesc_bot">
						{{animalObj.pet_characters}}
					</view>

				</view>
				<view class="desc_right">
					{{animalObj.pet_life||"暂无数据"}}
				</view>

			</view>
			<view class="detail_other">
				<view class="other_title">
					<image src="/static/local.png" mode=""></image> <text>{{animalObj.pet_nation||"暂无数据"}}</text>
				</view>
				<view class="other_desc">
					{{animalObj.pet_desc}}
				</view>
			</view>
		</view>
		<view class="col_btn" v-if="loginFlat" @click="changeCol(animalObj)" :class="flat?'active':''">
			<image src="../../static/collect.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		selDetail,
		addWeb,
		judgmentUserCol,
		addCol
	} from "@/api/index.js"
	export default {
		data() {
			return {
				uid: 0,
				animalObj: {},
				flat: false,
				loginFlat: false
			};
		},
		async onShow() {
			this.uid = uni.getStorageSync("id")
			await this.getDetail(this.uid)
			if (uni.getStorageSync("uid")) {
				let did = this.uid
				let uid = uni.getStorageSync("uid")
				this.loginFlat = true
				await addWeb(uid, did).then((content) => {
					console.log(content, 555)
				})
			} else {
				this.loginFlat = false
			}
		},
		methods: {
			changeCol(obj) {
				let {
					id: did
				} = obj
				let uid = uni.getStorageSync("uid")
				this.flat = !this.flat
				addCol(uid, did).then((content) => {
					console.log(content.data)
				})
			},
			backGo() {
				uni.navigateBack({
					delta: 1
				})
			},
			selCol(uid, did) {

				judgmentUserCol(uid, did).then((content) => {
					console.log(content.data.flat)
					this.flat = content.data.flat
				})
			},
			async getDetail(id) {
				await selDetail(id).then((data) => {
					console.log(data)
					let {
						data: {
							rows
						}
					} = data;
					this.animalObj = rows[0]
					// console.log(this.animalObj, 666)
					// this.animalObj=dat
					if (uni.getStorageSync("uid")) {
						let did = this.animalObj.id
						let uid = uni.getStorageSync("uid")
						this.selCol(uid, did)
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.detail_header_img {
		height: 100%;
		width: 100%;
		background-color: #333;

		>image {
			width: 100%;
			height: 100%;
		}
	}

	.col_btn {
		position: fixed;
		top: 66%;
		right: 20px;
		height: 40px;
		width: 40px;
		border-radius: 10px;
		background-color: #ECEBEB;
		box-shadow: 0px 4px 11px #ECEBEB, inset 0px 4px 11px #ECEBEB;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .3s;

		image {
			height: 80%;
			width: 80%;

		}

		&.active {
			background-color: #a1b275;
			box-shadow: 0px 4px 11px #a1b275, inset 0px 4px 11px #a1b275;
		}
	}

	.animal_detail {
		width: 100%;
		background-color: #f3f2f2;
		padding-bottom: 20px;

		.animal_detail_header {
			height: 347px;
			background-color: lightblue;
			position: relative;

			.detail_header_back {
				position: fixed;
				top: 10px;
				left: 10px;
				z-index: 1;

				image {

					width: 30px;
					height: 30px;
				}
			}


		}

		.animal_detail_main {

			.detail_desc,
			{
			height: 100px;
			margin: 20px 20px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.ddesc_tit {
				font-size: 28px;
				margin-bottom: 8px;
			}

			.ddesc_bot,
			.desc_right {
				font-size: 16px;
				color: rgba(0, 0, 0, 0.5);
			}

			.desc_right {
				margin-top: 10px;
			}

		}

		.detail_other {
			margin: 14px 18px 0;
			min-height: 186px;

			.other_title {
				margin-bottom: 14px;
				display: flex;
				align-items: center;

				image {
					height: 30px;
					width: 30px;
				}

				text {
					margin-left: 4px;
					font-weight: 100;
				}
			}

			.other_desc {
				line-height: 26px;
				font-weight: 100;
			}
		}
	}
	}
</style>